<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8" />
		<title>图片网格自适应</title>
		<meta text="viewport" content="width=device-width, initial-scale=1" />
		<meta text="description" content="Static &amp; Dynamic Tables" />
		<!-- basic styles -->
		<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="assets/css/bootstrap-treeview.min.css" />
		<link rel="stylesheet" href="assets/css/bootstrap-table.min.css" />
		<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="assets/css/ui.jqgrid.css" />
		<!-- fonts -->
		<link rel="stylesheet" href="assets/font-user-defined.css" />
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />
		<!-- ace styles -->
		<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
		<link rel="stylesheet" href="assets/css/jquery.gritter.css" />
		<link rel="stylesheet" href="assets/css/jquery-ui.min.css" />
		<link rel="stylesheet" href="assets/css/chosen.css" />
		<link rel="stylesheet" href="assets/css/ace.min.css" />
		<!-- inline styles related to this page -->
		<link rel="stylesheet" href="assets/css/foundation-datepicker.css" />
		<!-- ace settings handler -->
		<link rel="stylesheet" href="assets/css/easydialog.css" />
		<!--  <link rel="stylesheet" href="assets/style.css" />-->
		<link rel="stylesheet" href="assets/easydropdown.css" />
		<link rel="stylesheet" href="assets/css/ace-fonts.css" />
		<link rel="stylesheet" href="assets/css/colorpicker.css" />
		<link rel="stylesheet" href="selfjs/select2.css" />
		<link rel="stylesheet" href="assets/css/viewer.min.css">

		<script src="assets/js/ace-extra.min.js"></script>
		<script src="assets/js/jquery-2.0.3.min.js"></script>
		<script src="assets/js/viewer-jquery.min.js"></script>
		<script src="assets/js/bootstrap-treeview.min.js"></script>
		<script src="assets/js/bootstrap-colorpicker.min.js"></script>
		<script src="assets/js/sockjs.min.js"></script>
		<script src="assets/angular.min.js"></script>
		<script src="assets/angular-route.js"></script>
		<script src="selfjs/indexapp.js"></script>
		<!-- <script src="selfjs/reporter_app.js"></script>-->
		<script src="selfjs/router.js"></script>
		<!-- <script  src="selfjs/general.js"></script>-->
		<script src="selfjs/generalExtend.js"></script>
		<script src="selfjs/index_ctrl.js"></script>
		<script src="selfjs/echarts-plain.js"></script>
		<script src="main/navbar_ctrl.js"></script>
		<!--自定义style样式，最后加载-->
		<link rel="stylesheet" href="selfjs/indexStyle.css" />
		<style type="text/css">
			.img-adapt {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>
    <div id="dowebok">
		<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
			<img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt" />
			<br/><label>面料1</label>
		</div>
		<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
			<img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt" />
			<br/><label>面料1</label>
		</div>
		<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
			<img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt" />
			<br/><label>面料1</label>
		</div>
		<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
			<img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt" />
			<br/><label>面料1</label>
		</div>		<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
			<img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt" />
			<br/><label>面料1</label>
		</div>
		<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
			<img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt" />
			<br/><label>面料1</label>
		</div>
		<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
			<img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt" />
			<br/><label>面料1</label>
		</div>
		<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
			<img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt" />
			<br/><label>面料1</label>
		</div>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
            <img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt"/>
            <br/><label>面料1</label>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
            <img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt"/>
            <br/><label>面料1</label>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
            <img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt"/>
            <br/><label>面料1</label>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
            <img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt"/>
            <br/><label>面料1</label>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
            <img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt"/>
            <br/><label>面料1</label>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
            <img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt"/>
            <br/><label>面料1</label>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
            <img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt"/>
            <br/><label>面料1</label>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
            <img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt"/>
            <br/><label>面料1</label>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
            <img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt"/>
            <br/><label>面料1</label>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
            <img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt"/>
            <br/><label>面料1</label>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
            <img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt"/>
            <br/><label>面料1</label>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
            <img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt"/>
            <br/><label>面料1</label>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
            <img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt"/>
            <br/><label>面料1</label>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
            <img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt"/>
            <br/><label>面料1</label>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
            <img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt"/>
            <br/><label>面料1</label>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" align="center">
            <img data-original="img/img_1211.jpg" src="img/img_1211.jpg" class="img-rounded img-adapt"/>
            <br/><label>面料1</label>
        </div>
    </div>

		<script>
			$(function() {
				$('#dowebok').viewer({
					url: 'src',
				});
			});

			function imgListener(msg) {
				alert(msg)
			}

			// 点击菜单栏中菜单的选项，选中样式
			$(".submenu li a").click(function() {
				$(".submenu li").removeClass("active");
				$(this).parent().addClass("active");
			});
		</script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/typeahead-bs2.min.js"></script>
		<!-- page specific plugin scripts -->
		<script src="assets/js/jquery-ui.min.js"></script>
		<script src="assets/js/bootstrap-datetimepicker.js"></script>
		<script src="assets/js/foundation-datepicker.js"></script>
		<script src="assets/js/foundation-datepicker.zh-CN.js"></script>
		<script src="assets/js/easydialog.js"></script>
		<script src="assets/js/jquery-ui-1.10.3.custom.min.js"></script>
		<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="assets/js/jquery.slimscroll.min.js"></script>
		<script src="assets/js/jquery.easy-pie-chart.min.js"></script>
		<script src="assets/js/jquery.sparkline.min.js"></script>
		<script src="assets/js/chosen.jquery.min.js"></script>
		<script src="assets/js/flot/jquery.flot.min.js"></script>
		<script src="assets/js/flot/jquery.flot.pie.min.js"></script>
		<script src="assets/js/flot/jquery.flot.resize.min.js"></script>
		<script src="assets/js/flot/jquery.flot.time.min.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>
		<!--<script src="assets/bootstrap2.3/js/bootstrap.min.js"></script>-->
		<script src="assets/js/tableExport.js"></script>
		<script src="assets/js/jquery.base64.js"></script>
		<script src="assets/js/bootstrap-table.js"></script>
		<script src="assets/js/bootstrap-table-export.js"></script>
		<!-- ace scripts -->
		<script src="assets/js/jquery.easydropdown.min.js"></script>
		<script src="assets/js/jqGrid/jquery.jqGrid.min.js"></script>
		<script src="assets/js/jqGrid/i18n/grid.locale-cn.js"></script>
		<script src="assets/js/extend/jquery.jqGrid.extend.js"></script>
		<script src="assets/js/extend/jquery-ui.dialog.extend.js"></script>
		<script src="assets/js/ace-elements.min.js"></script>
		<script src="assets/js/ace.min.js"></script>
		<script src="assets/js/jquery.gritter.min.js"></script>
		<script src="selfjs/dateFormat.js"></script>
		<script src="selfjs/select2.js"></script>
		<script src="selfjs/index.js"></script>
	</body>

</html>